<template>
  <div class="sickbedList">
    <div class="left-menu">
      <!-- <div class="left-head">
        <img src="../assets/refresh.png" @click="getDepartmentList" />
        <span>刷新</span>
      </div>-->
      <el-menu
        :default-active="activeIndex"
        class="el-menu-vertical-demo"
        v-for="item in menuList"
        :key="item.departmrntState"
      >
        <el-menu-item
          :index="item.departmentId.toString()"
          :disabled="item.state"
          @click="menuClick(item.departmentId.toString())"
        >
          <span slot="title">{{ item.departmentName }}</span>
        </el-menu-item>
      </el-menu>
    </div>
    <el-row style="width: 10px"></el-row>
    <div class="right">
      <el-row style="height: 10px;width: 100%"></el-row>
      <div class="search-row">
        <el-input v-model="sickBedId" placeholder="输出病床id"></el-input>
        <el-row style="width: 10px"></el-row>
        <el-input v-model="sickBedName" placeholder="输出病床名称"></el-input>
        <el-row style="width: 10px"></el-row>
        <el-select v-model="sickBedState" placeholder="病床状态">
          <el-option
            v-for="item in stateOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-row style="width: 10px"></el-row>
        <el-button icon="el-icon-search" circle @click="beforeGetBedList()"></el-button>
      </div>
      <div class="btn-row">
        <el-button type="primary" @click="addSickBed" :disabled="isAdd">新增病床</el-button>
        <el-button type="primary" @click="activeSickBed" :disabled="isActive">启用病床</el-button>
        <el-button type="warning" @click="blockSickBed" :disabled="isBlock">停用病床</el-button>
        <el-button type="danger" @click="delSickBed" :disabled="isDel">删除病床</el-button>
      </div>
      <div class="recordList">
        <el-table :data="sickbedData" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50"></el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-link type="success" @click="editOnly(scope.row)">编辑</el-link>
              <!-- <el-link type="danger" @click="delOnly(scope.row)">删除</el-link> -->
              <!-- <span @click="del(scope.row)">删除</span> -->
            </template>
          </el-table-column>
          <!-- <el-table-column label="序号" width="200">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
              
            </template>
          </el-table-column>-->
          <el-table-column prop="sickBedId" label="病床id" width="200"></el-table-column>
          <el-table-column prop="sickBedName" label="病床名称"></el-table-column>
          <el-table-column prop="description" label="描述"></el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">
              <span class="onActive" v-if="scope.row.sickBedState == 1">空闲中</span>
              <span class="onDanger" v-if="scope.row.sickBedState == 0">故障中</span>
              <span class="onUse" v-if="scope.row.sickBedState == 2">启用中</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page">
        <el-pagination
          align="right"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageIndex"
          :page-sizes="[5, 10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next"
          :total="totalNumber"
          style="margin-top: 58px; margin-bottom: 40px"
        ></el-pagination>
      </div>
      <el-dialog
        :title="diaTitle"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="病床名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="病床描述">
            <el-input type="textarea" v-model="form.desc"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="formComfirm">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "sickbedList",
  props: {
    adminName: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      isEditId: "",
      isEditState: "",
      sickBedId: "",
      sickBedName: "",
      sickBedState: -1,
      activeIndex: "",
      isAdd: true,
      isDel: true,
      isActive: true,
      isBlock: true,
      multipleSelection: [],
      stateOptions: [
        {
          label: "全部",
          value: -1
        },
        {
          label: "空闲中",
          value: 1
        },
        {
          label: "故障中",
          value: 0
        },
        {
          label: "启用中",
          value: 2
        }
      ],
      menuList: [],
      sickbedData: [],
      form: {
        name: "",
        desc: ""
      },
      sickbedId: "",
      sickbedName: "",
      sickbedState: "",
      dialogVisible: false,
      diaTitle: "",
      pageIndex: 1,
      pageSize: 10,
      totalNumber: 0
    };
  },
  created() {
    this.getDepartmentList();
  },
  methods: {
    beforeGetBedList() {
      this.pageIndex = 1;
      this.getDepartmentList();
    },
    getDepartmentList() {
      // console.log(111);
      this.$axios.get("/api/CjwDepartment/GetDepartmentList").then(res => {
        this.menuList = res.data;
      });
      console.log(this.menuList);
    },

    menuClick(id) {
      this.activeIndex = id;
      this.isAdd = false;
      this.isDel = false;
      // let name = "chenjiawei";
      // console.log(id);
      this.pageIndex = 1;
      this.getBedList();
      // this.$emit("admin", name);
      // let time =
    },

    handleSelectionChange(val) {
      this.getBtnState(val);
      this.multipleSelection = val;
    },

    getBtnState(val) {
      // console.log(val);
      // console.log(222);
      let active = false;
      let block = false;
      let use = false;
      val.forEach(i => {
        // console.log(i.sickBedState);
        if (i.sickBedState == 1) {
          active = true;
        } else if (i.sickBedState == 0) {
          block = true;
        } else if (i.sickBedState == 2) {
          use = true;
        }
      });
      if (val.length == 0) {
        use = true;
      }
      // console.log(active, block, use);
      if (use == true) {
        this.isActive = true;
        this.isBlock = true;
      }
      if (use == false && active == true && block == false) {
        this.isActive = true;
        this.isBlock = false;
      }
      if (use == false && active == false && block == true) {
        this.isActive = false;
        this.isBlock = true;
      }
      if (active == true && block == true) {
        this.isActive = true;
        this.isBlock = true;
      }
    },

    getBedList() {
      let bedId = "";
      let params = {
        departmentId: Number(this.activeIndex),
        sickBedId: Number(this.sickBedId),
        sickBedName: this.sickBedName,
        sickBedState: Number(this.sickBedState),
        pageSize: this.pageSize,
        pageIndex: this.pageIndex
      };
      // console.log(params);
      this.$axios
        .post("/api/CjwSickBedList/GetSickBedList", params)
        .then(res => {
          this.totalNumber = res.data.total;
          this.sickbedData = res.data.sickBedLists;
        });
    },

    addSickBed() {
      this.diaTitle = "新增病床";
      this.dialogVisible = true;
      this.form = {
        name: "",
        desc: ""
      };
    },

    // editSickBed() {
    //   this.diaTitle = "编辑病床";
    //   this.dialogVisible = true;
    // }

    editOnly(item) {
      this.diaTitle = "编辑病床";
      this.isEditId = item.sickBedId;
      this.isEditState = item.sickBedState;
      this.form.name = item.sickBedName;
      this.form.desc = item.description;
      this.dialogVisible = true;
      console.log(item);
    },

    activeSickBed() {
      this.$confirm("此操作将会启用选中的病床,是否确定?", "启用病床", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          // console.log(111);
          let sickBedIds = [];
          this.multipleSelection.forEach(i => {
            sickBedIds.push(i.sickBedId);
          });
          let params = {
            sickBedIds,
            sickBedState: 1
          };
          // console.log(params);
          this.$axios
            .post("/api/CjwSickBedList/UpdateBedState", params)
            .then(res => {
              // console.log(res);
              this.$message({
                type: "success",
                message: "启用病床成功!"
              });
              this.getBedList();
              let op = {
                opAdminName: this.adminName,
                opTable: "启用病床",
                opData: `病床id:${params.sickBedIds}`
              };
              this.$axios.post("/api/CjwOperationList/InsertOpData", op);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消启用"
          });
        });
    },

    blockSickBed() {
      this.$confirm("此操作将会停用选中的病床,是否确定?", "停用病床", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          // console.log(111);
          let sickBedIds = [];
          this.multipleSelection.forEach(i => {
            sickBedIds.push(i.sickBedId);
          });
          let params = {
            sickBedIds,
            sickBedState: 0
          };
          // console.log(params);
          this.$axios
            .post("/api/CjwSickBedList/UpdateBedState", params)
            .then(res => {
              // console.log(res);
              this.$message({
                type: "success",
                message: "停用病床成功!"
              });
              this.getBedList();
              let op = {
                opAdminName: this.adminName,
                opTable: "停用病床",
                opData: `病床id:${params.sickBedIds}`
              };
              this.$axios.post("/api/CjwOperationList/InsertOpData", op);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消停用"
          });
        });
    },

    delSickBed() {
      this.$confirm("此操作将删除选中的病床,是否确定?", "删除病床", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          // console.log(111);
          let sickBedIds = [];
          this.multipleSelection.forEach(i => {
            sickBedIds.push(i.sickBedId);
          });
          // console.log(params);
          console.log(sickBedIds);
          this.$axios
            .post("/api/CjwSickBedList/DeleteSickBed", sickBedIds)
            .then(res => {
              // console.log(res);
              this.$message({
                type: "success",
                message: "删除病床成功!"
              });
              this.getBedList();
              let op = {
                opAdminName: this.adminName,
                opTable: "删除病床",
                opData: `病床id:${sickBedIds}`
              };
              console.log(op);
              this.$axios.post("/api/CjwOperationList/InsertOpData", op);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    handleClose() {
      this.dialogVisible = false;
    },

    formComfirm() {
      if (this.diaTitle == "新增病床") {
        let params = {
          departmentId: Number(this.activeIndex),
          sickBedState: 1,
          sickBedName: this.form.name,
          description: this.form.desc
        };
        this.$axios
          .post("/api/CjwSickBedList/InsertSickBed", params)
          .then(res => {
            this.dialogVisible = false;
            this.getBedList();
            this.$message({
              message: "新增成功",
              type: "success"
            });
            let op = {
              opAdminName: this.adminName,
              opTable: "新增病床",
              opData: `科室id:${params.departmentId}病床名:${params.sickBedName}描述:${params.description}`
            };
            this.$axios.post("/api/CjwOperationList/InsertOpData", op);
          });
      } else {
        let params = {
          sickBedId: this.isEditId,
          sickBedName: this.form.name,
          departmentId: Number(this.activeIndex),
          description: this.form.desc,
          sickBedState: this.isEditState
        };
        console.log(params);
        this.$axios
          .post("/api/CjwSickBedList/UpdateSickBed", params)
          .then(res => {
            console.log(111);
            let op = {
              opAdminName: this.adminName,
              opTable: "编辑病床",
              opData: `病床id:${params.sickBedId}病床名:${params.sickBedName}描述:${params.description}`
            };
            this.$axios
              .post("/api/CjwOperationList/InsertOpData", op)
              .then(res => {
                this.dialogVisible = false;
                this.getBedList();
                this.$message({
                  message: "修改成功",
                  type: "success"
                });
              });
          });
      }
    },

    handleSizeChange(val) {
      // console.log(val);
      this.pageSize = val;
      this.getBedList();
    },

    handleCurrentChange(val) {
      // console.log(val);
      this.pageIndex = val;
      this.getBedList();
    }
  }
};
</script>

<style scoped>
.sickbedList {
  display: flex;
  height: 100%;
}

.left-menu {
  width: 250px;
}

.left-menu .left-head {
  display: flex;
  align-items: center;
}

.right {
  width: 100%;
}

.left-menu .left-head img {
  width: 32px;
  height: 32px;
}

.search-row {
  display: flex;
  padding-bottom: 10px;
}

.search-row .el-input {
  width: 200px;
}

.recordList {
  width: 100%;
  height: 70%;
}

.page {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
}

.onActive {
  color: black;
  background-color: #76ee00;
  border-radius: 8px;
}
.onDanger {
  color: black;
  background-color: #ee2c2c;
  border-radius: 8px;
}
.onUse {
  color: black;
  background-color: #409eff;
  border-radius: 8px;
}
</style>
